<style scoped>
.pro-con {
    padding: 0 20px;
    margin-bottom: 50px;
}
.pro-con .ivu-form-item{
    margin-bottom: 0;
}

.pro-con .ivu-col{
    padding-right: 0 !important;

}
 .fr{
    float: right;
}
.pro-pagesize .mr10{
    margin-right: 10px;
}
.search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}


    /*//////////////////////////////*/


.search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}
.search-form{
    border-bottom: 1px solid #d9d9d9;
}
.search-form .ivu-col{
    margin-bottom: 15px;
}
.clear{
    clear: both;
}
.table-theme{
    clear: both;
}
.table-action{
    padding-top: 0;
    padding-bottom: 15px;
}
.pro-pagesize{
    margin-bottom:10px;

}

.common-box-body.pr0 .ivu-form-item{
    padding-right: 0 !important;
}      
</style>
<template>
    <div class="pro-list">
        <product-title></product-title>
        <div class="pro-con">
            <div class="pro-con-f common-box-body">

                <Row>
                    <h3 class="search-h3 huang" >
                        快速搜索
                    </h3>
                    <Form :model="formItem" ref="formItem" class="search-form">
                            <Row>
                                <Col :xs="24" :sm="24" :md="24" :lg="12">
                                    <Form-item label="机构名称">
                                        <Input v-model="formItem.name" placeholder="请输入机构名称"></Input>
                                    </Form-item>
                                </Col>
                                <Col :xs="24" :sm="24" :md="24" :lg="8">
                                    <Form-item label="姓名">
                                        <Input size="large" type="text"  v-model="formItem.link_name" placeholder="请输入联系人名称" />
                                    </Form-item>
                                </Col>
                                <Col :xs="24" :sm="24" :md="24" :lg="4" class="table-action" >
                                    <Button v-if="$isShow('compensate_link/create')" type="warning" size="large" class="fr" icon="plus"  @click="add()">新增</Button>
                                    <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                                            <span class="clear"></span>
                                        <Button type="primary" size="large" class="fr"   icon="ios-search" @click="search">搜索</Button>
                                    </div>
                                </Col>
                                <div class="clear"></div>
                            </Row>
                    </Form>
                </Row>
            </div>
            <div class="table-theme highlight_table">
                <Table :loading="tableloading" ref="currentRowTable"  @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="tableHead" :data="tableData"></Table>
            </div>
            <div id="footer">                
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="16">
                        <i-button v-if="$isShow('compensate_link/del')" type="error" class="fl mr10 " :disabled="disabled" @click="remove">删除</i-button>
                        <i-button v-if="$isShow('compensate_link/get_detail')" type="info" class="fl mr10 " :disabled="disabled" @click="toDetail">编辑</i-button>         
                    </Col>
                    <Col :md="24" :lg="8" class="tRight">
                        <Page ref="pages"  :total="total" show-total show-sizer  show-elevator :page="formItem.p" :page-size="formItem.pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>
        <!-- <Page style="margin:15px 0;" placement="top" :total="total" show-sizer show-elevator show-total :page="formItem.p" :pageSize="formItem.pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page> -->
        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle';
    import {link_list,del_link} from '../../api/compensate_link'
    export default {
        data(){
            return{
                tableHead:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        key: 'name',
                        title:'机构名称',
                        align: 'center'
                    },
                    {
                        key:'link_name',
                        title:'联系人',
                        align:'center',
                    },
                    {
                        key:'tel',
                        title:'联系电话',
                        align:'center',
                    },
                    {
                        key:'address',
                        title:'联系地址',
                        align:'center',
                    },
                    {
                        title:'经纬度',
                        align:'center',
                        render:(h,params)=>{
                            return h('div',[
                                h('div',params.row.lat+','+params.row.lng)
                            ])
                        }
                    },
                    // {
                    //     title:'操作',
                    //     align:'center',
                    //     render:(h,params)=>{
                    //         return h('div',[
                    //             h('Button',{
                    //                 props:{
                    //                     type: 'primary',
                    //                     size: 'small'
                    //                 },
                    //                 style: {
                    //                     marginRight: '5px'
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         let id =params.row.id;
                    //                         this.$router.push({name: 'link_update', params: {id: id}});
                    //                     }
                    //                 }
                    //             },'编辑'),
                    //             h('Button',{
                    //                 props:{
                    //                     type: 'error',
                    //                     size: 'small'
                    //                 },
                    //                 style: {
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         let _params ={
                    //                             id:params.row.id
                    //                         };
                    //                         this.$Modal.confirm({
                    //                             title:'正在进行删除操作',
                    //                             content:'确认删除吗？',
                    //                             onOk:()=>{
                    //                                 this.delete(_params);
                    //                             }
                    //                         })
                    //                     }
                    //                 }
                    //             },'删除'),
                    //         ])
                    //     }
                    // }
                ],
                formItem:{
                    name:'',
                    link_name:'',
                    p:1,
                    pagesize:10,
                },
                total:1,
                tableData:[],
                tableloading:false,
                current:{},
                disabled:true,
            }
        },
        components:{
            productTitle
        },
        activated(){
            this.get_list();
        },
        methods:{
            tableCurrentChange(current,oldCurrent){
                this.disabled = false;
                this.current = current;
            },
            search(){
                this.formItem.p=1;
                this.get_list();
            },
            pageChange(value){
                this.formItem.p = value;
                this.get_list();
            },
            pageSizeChange(val){
                 this.formItem.pagesize = val;
                 this.get_list();
            },
            add() {
                this.$router.push({name: 'link_create'});
            },
            remove(){
                let _params ={
                    id:this.current.id,
                };
                this.$Modal.confirm({
                    title:'正在进行删除操作',
                    content:'确认删除吗？',
                    onOk:()=>{
                        this.delete(_params);
                    }
                })
            },
            toDetail(){
                this.$router.push({name: 'link_update', params: {id: this.current.id}});
            },
            get_list(){
                new Promise((rev,rej)=>{
                    link_list(this.formItem).then(res=>{
                        // console.log(this)
                        if(res.data.err==0){
                            this.tableData=[];
                            this.total = res.data.data.total;
                            this.tableData = res.data.data.list;
                        }else{
                            this.$Messge.error(res.data.info);
                        }
                        rev();
                    }).catch(error=>{
                        rej(error);
                    })

                })
            },
            delete(params){
                new Promise((rev,rej)=>{
                     del_link(params).then(res=>{
                         if(res.data.err==0){
                            //  this.get_list();
                             location.reload();
                         }else{
                             this.$Messge.error(res.data.info);
                         }
                         rev();
                     }).catch(error=>{
                         rej(error);
                     })
                })
            }
        }
    }
</script>

